import React from 'react';
import BreadCrumb from '@/components/BreadCrumb';
import s from './style.module.css';
import Word from './word';
import White from './white';
import cn from 'classnames';
import i from '../../common.module.css';
import { Tabs, Helper } from '@knownsec/react-component';
const { TabPane } = Tabs;

export default function keyword() {
  return (
    <>
      <BreadCrumb
        arr={[
          { link: '', name: '策略管理' },
          { link: '', name: '敏感词', active: true },
        ]}
      />
      <div className={s.keyMain}>
        <div className={s.keyBox}>
          <Tabs animated>
            <TabPane tab={<span className={s.tabTitle}>敏感词</span>} key={1}>
              <Word />
            </TabPane>
            <TabPane
              tab={
                <span className={s.tabTitle}>
                  <span>白名单设置</span>
                  <Helper
                    className={cn(i.vam, "pl8")}
                    placement="top"
                    overlay="系统将对您添加到白名单的敏感词不做监测。"
                  ></Helper>
                </span>
              }
              key={2}
            >
              <White />
            </TabPane>
          </Tabs>
        </div>
      </div>
    </>
  );
}
